<template>
  <div class="content">
    <div class="top">
      <div class="top1">中科慧学慧记</div>
      <div class="top2">我的学习记录</div>
    </div>
    <div class="container">
      <div class="user">
        <img class="header" v-if="obj.avatar" :src="obj.avatar" alt="" />
        <img
          class="header"
          v-else
          src="../assets/homeimg/头像 (1).png"
          alt=""
        />
        <div class="name">Hi，{{ obj.nickname }}</div>
      </div>
      <div class="part1">
        <div class="item">
          <div class="text">本课分数</div>
          <div class="score">{{ obj.num }}</div>
        </div>
        <div class="item">
          <div class="text">学习天数</div>
          <div class="score">{{ obj.study_num }}</div>
        </div>
        <div class="item">
          <div class="text">打卡天数</div>
          <div class="score">{{ obj.sign_num }}</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="xue">
        <img src="../assets/homeimg/dui.png" alt="" />
        <div class="right">
          <div class="today">今日学习</div>
          <div>行动力超过94%的学员</div>
        </div>
      </div>
      <div class="peng">
        <div class="left"></div>
        <div class="right">
          <div class="today">朋友圈打卡</div>
          <div>坚持打卡，记录成长过程</div>
        </div>
      </div>
      <!-- <div class="footer" @click="submit">下载APP和他（她）一起学习</div> -->
      <div class="footer" @click="submit">点击此处，和他（她）一起学习</div>
    </div>
  </div>
</template>
<script>
import courseApi from "@/api/fuxi";
export default {
  data() {
    return {
      obj: {},
      type: Number,
      down_url: "",
      wx_h5_link: "",
    };
  },
  mounted() {
    if (this.$route.query.token) {
      this.$store.commit("SAVE_TOKEN", this.$route.query.token);
    }
    var course_id = this.$route.query.course_id;
    var catelog_id = this.$route.query.catelog_id;
    this.loadData(course_id, catelog_id);
    const u = navigator.userAgent;
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      this.type = 2;
    } else {
      this.type = 1;
    }
    this.getDown();
  },
  methods: {
    getDown() {
      this.$http.get("/api/index/config").then((res) => {
        this.down_url = res.data.wx_h5_link + this.obj.fxid;
      });
      // this.$http.post("/api/set/download").then((res) => {
      //   console.log(res);
      //   if (this.type == 1) {
      //     this.down_url = res.data.android_url;
      //   } else {
      //     this.down_url = res.data.ios_url;
      //   }
      // });
    },
    submit() {
      window.location.href = this.down_url;
    },
    loadData(course_id, catelog_id) {
      let data = {
        course_id,
        catelog_id,
        score: 0,
      };
      // courseApi.leesignInfo(data).then((res) => {
      //   console.log(res);
      //   // this.obj = res.data;
      // });
      this.$http.post("/api/Leesign/signInfo", data).then((res) => {
        this.obj = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  background: url(../assets/homeimg/dabg.png) no-repeat center;
  background-size: 100% 100%;
  padding: 8vw;
  box-sizing: border-box;
  .top {
    margin-top: 6.4vw;
    .top1 {
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .top2 {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin: 3vw 0 3vw;
    }
  }
  .container {
    width: 84vw;
    background: rgba(255, 242, 215, 1);
    box-shadow: 0px 0px 30px 0px rgba(219, 39, 39, 0.5);
    border-radius: 20px;
    margin: 0 auto;
    padding: 6.66vw 6.66vw 10vw;
    box-sizing: border-box;
    .user {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .header {
        height: 18.66vw;
        width: 18.66vw;
        margin-right: 2vw;
        border-radius: 50%;
      }
    }
    .part1 {
      margin-top: 4vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .text {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(153, 153, 153, 1);
        }
        .score {
          margin-top: 4vw;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .line {
      width: 100%;
      height: 1px;
      background: rgba(220, 220, 220, 1);
      margin: 4vw auto;
    }
    .xue {
      display: flex;
      justify-content: flex-start;
      align-content: center;
      position: relative;
      img {
        width: 10.66vw;
        height: 10.66vw;
        margin-right: 3vw;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: -8vw;
        left: 5.03333vw;
        width: 2px;
        height: 8vw;
        background: rgba(252, 171, 37, 1);
      }
    }
    .right {
      div {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
      .today {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
    .peng {
      margin-top: 8vw;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      .left {
        width: 10.66vw;
        height: 10.66vw;
        margin-right: 3vw;
        background: rgba(247, 226, 154, 1);
        border-radius: 50%;
      }
    }
    .footer {
      // width:74.666vw;
      height: 11.733vw;
      background: linear-gradient(
        90deg,
        rgba(255, 209, 66, 1) 0%,
        rgba(255, 175, 5, 1) 100%
      );
      border-radius: 44px;
      margin: 12.66vw auto 0;
      line-height: 11.733vw;
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(139, 72, 3, 1);
    }
  }
}
</style>
